Next.js Edge Config: توزیع آسان پیکربندی سراسری

در چشم‌انداز پرشتاب توسعه وب امروزی، ارائه تجربیات شخصی‌سازی‌شده و پویا به کاربران در سراسر جهان بسیار حیاتی است. Next.js، یک فریم‌ورک محبوب React، راه‌حلی قدرتمند برای ساخت برنامه‌های وب با کارایی و مقیاس‌پذیری بالا ارائه می‌دهد. یکی از ویژگی‌های کلیدی آن Edge Config است، ابزاری قدرتمند برای مدیریت و توزیع پیکربندی به صورت سراسری در لبه (edge). این پست وبلاگ یک راهنمای جامع برای درک و استفاده از Next.js Edge Config برای بهینه‌سازی عملکرد برنامه و ارائه تجربیات متناسب با مخاطبان جهانی شما فراهم می‌کند.

Next.js Edge Config چیست؟

Next.js Edge Config یک ذخیره‌ساز کلید-مقدار (key-value) با توزیع سراسری و تأخیر کم است که به طور خاص برای ارائه داده‌های پیکربندی به توابع لبه (Edge Functions) Next.js طراحی شده است. برخلاف پایگاه‌های داده سنتی یا APIها، Edge Config برای سرعت و کارایی بهینه شده است و به شما امکان می‌دهد تا در چند میلی‌ثانیه از هر کجای دنیا به داده‌های پیکربندی دسترسی داشته باشید. این قابلیت به شما امکان می‌دهد تا رفتار برنامه خود را بر اساس مقادیر پیکربندی به صورت پویا تنظیم کنید، بدون اینکه عملکرد را فدا کنید.

آن را مانند یک فایل JSON در نظر بگیرید که به صورت سراسری تکثیر شده و می‌توانید با سرعت فوق‌العاده‌ای از توابع لبه به آن کوئری بزنید. این ویژگی آن را برای موارد زیر ایده‌آل می‌کند:

• تست A/B: ارائه پویای نسخه‌های مختلف برنامه به بخش‌های مختلف کاربران.
• فلگ‌های ویژگی (Feature Flags): فعال یا غیرفعال کردن ویژگی‌ها بر اساس مقادیر پیکربندی.
• شخصی‌سازی: متناسب‌سازی محتوا و تجربیات بر اساس ترجیحات یا مکان کاربر.
• مسیریابی جغرافیایی: هدایت کاربران به منابع مختلف بر اساس مکان آنها.
• محدودیت نرخ درخواست (Rate Limiting): پیاده‌سازی محدودیت نرخ درخواست بر اساس مقادیر پیکربندی.
• بین‌المللی‌سازی (i18n): ارائه محتوای متفاوت بر اساس منطقه کاربر، اگرچه Next.js پشتیبانی داخلی i18n نیز دارد. Edge Config می‌تواند سناریوهای پیچیده مسیریابی منطقه‌ای را مدیریت کند.

چرا از Edge Config استفاده کنیم؟

در اینجا مزایای کلیدی استفاده از Next.js Edge Config آورده شده است:

• توزیع سراسری: داده‌ها در سراسر شبکه لبه جهانی Vercel تکثیر می‌شوند و دسترسی با تأخیر کم از هر کجای دنیا را تضمین می‌کنند.
• تأخیر کم: برای سرعت بهینه شده است و به شما امکان می‌دهد در چند میلی‌ثانیه به داده‌های پیکربندی دسترسی داشته باشید.
• به‌روزرسانی‌های اتمی: به‌روزرسانی‌ها اتمی هستند و ثبات داده‌ها را تضمین می‌کنند. هرگز با وضعیتی مواجه نخواهید شد که در حین یک استقرار، برخی لبه‌ها داده‌های قدیمی و برخی دیگر داده‌های جدید را داشته باشند.
• مدیریت پیکربندی ساده‌شده: مکانی مرکزی برای مدیریت پیکربندی برنامه شما فراهم می‌کند.
• یکپارچه‌سازی بی‌نقص با Next.js: برای کار بی‌نقص با توابع لبه Next.js طراحی شده است.
• بهبود عملکرد: نیاز به واکشی داده از پایگاه‌های داده یا APIها را کاهش داده و عملکرد برنامه را بهبود می‌بخشد.
• کاهش هزینه‌های زیرساخت: می‌تواند با حذف نیاز به پایگاه‌های داده یا APIهای اضافی برای داده‌های پیکربندی، به کاهش هزینه‌های زیرساخت کمک کند.
• امنیت بهبودیافته: داده‌های پیکربندی برنامه شما را به صورت امن ذخیره و مدیریت می‌کند.

چگونه کار با Edge Config را شروع کنیم؟

در اینجا یک راهنمای گام به گام برای شروع کار با Next.js Edge Config آورده شده است:

۱. راه‌اندازی پروژه

اطمینان حاصل کنید که یک پروژه Next.js دارید. در غیر این صورت، یکی با استفاده از دستور زیر ایجاد کنید:

            npx create-next-app@latest my-app
cd my-app
            

              
                Copy
              
            
          

۲. ایجاد یک Edge Config

برای استفاده از Edge Config به یک حساب Vercel نیاز دارید. پس از ورود به سیستم، به پروژه Vercel خود بروید و یک Edge Config جدید ایجاد کنید. یک نام توصیفی به آن بدهید.

۳. نصب SDK مربوط به Edge Config

SDK @vercel/edge-config را در پروژه Next.js خود نصب کنید:

            npm install @vercel/edge-config
# or
yarn add @vercel/edge-config
# or
pnpm install @vercel/edge-config
            

              
                Copy
              
            
          

۴. پیکربندی متغیرهای محیطی

شما باید متغیر محیطی EDGE_CONFIG را پیکربندی کنید. مقدار این متغیر را می‌توانید در داشبورد Vercel برای Edge Config خود پیدا کنید. آن را به فایل .env.local خود (یا تنظیمات پروژه Vercel خود برای محیط پروداکشن) اضافه کنید:

            EDGE_CONFIG=your_edge_config_url
            

              
                Copy
              
            
          

مهم: هرگز فایل .env.local خود را به مخزن (repository) خود کامیت نکنید. از تنظیمات متغیرهای محیطی Vercel برای محیط‌های پروداکشن استفاده کنید.

۵. دسترسی به مقادیر پیکربندی در کد شما

اکنون می‌توانید به مقادیر Edge Config خود در کد Next.js دسترسی پیدا کنید. در اینجا یک مثال آورده شده است:

            // pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const featureFlag = await get('featureFlag');
  const welcomeMessage = await get('welcomeMessage');

  return {
    props: {
      featureFlag,
      welcomeMessage,
    },
  };
}

export default function Home({ featureFlag, welcomeMessage }) {
  return (
    <div>
      <h1>{welcomeMessage}</h1>
      {featureFlag ? <p>Feature is enabled!</p> : <p>Feature is disabled.</p>}
    </div>
  );
}

            

              
                Copy
              
            
          

در این مثال، ما مقادیر featureFlag و welcomeMessage را از Edge Config در getServerSideProps واکشی می‌کنیم. سپس این مقادیر به عنوان props به کامپوننت Home ارسال می‌شوند.

۶. به‌روزرسانی مقادیر پیکربندی

شما می‌توانید مقادیر Edge Config خود را از طریق داشبورد Vercel به‌روز کنید. تغییرات در عرض چند میلی‌ثانیه به صورت سراسری منتشر می‌شوند.

موارد استفاده پیشرفته و مثال‌ها

تست A/B با Edge Config

Edge Config برای تست A/B عالی است. شما می‌توانید یک مقدار پیکربندی تعریف کنید که تعیین می‌کند کدام نسخه از برنامه شما به کاربر ارائه شود. برای مثال:

1. یک Edge Config با کلیدی به نام abTestGroup ایجاد کنید.
2. مقدار آن را روی A یا B تنظیم کنید.
3. در تابع لبه (Edge Function) خود، مقدار abTestGroup را بخوانید.
4. بر اساس این مقدار، نسخه A یا نسخه B محتوای خود را ارائه دهید.

در اینجا یک مثال آورده شده است:

            // pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const abTestGroup = await get('abTestGroup');

  let content;
  if (abTestGroup === 'A') {
    content = 'This is version A!';
  } else {
    content = 'This is version B!';
  }

  return {
    props: {
      content,
    },
  };
}

export default function Home({ content }) {
  return (
    <div>
      <h1>A/B Test</h1>
      <p>{content}</p>
    </div>
  );
}

            

              
                Copy
              
            
          

شما می‌توانید از ابزارهای تحلیلی برای ردیابی عملکرد هر نسخه استفاده کنید و تعیین کنید کدام نسخه بهتر عمل می‌کند. ابزارهایی مانند Google Analytics، Amplitude یا Mixpanel را برای جمع‌آوری و تحلیل جامع داده‌های تست A/B در نظر بگیرید.

فلگ‌های ویژگی با Edge Config

فلگ‌های ویژگی به شما امکان می‌دهند تا ویژگی‌ها را بدون استقرار کد جدید فعال یا غیرفعال کنید. این برای آزمایش ویژگی‌های جدید در محیط پروداکشن یا ارائه تدریجی ویژگی‌ها به زیرمجموعه‌ای از کاربران مفید است. مشابه تست A/B، می‌توانید در دسترس بودن ویژگی را با یک فلگ بولین ساده در Edge Config خود کنترل کنید.

1. یک Edge Config با کلیدی به نام newFeatureEnabled ایجاد کنید.
2. مقدار آن را روی true یا false تنظیم کنید.
3. در تابع لبه خود، مقدار newFeatureEnabled را بخوانید.
4. بر اساس این مقدار، ویژگی جدید را فعال یا غیرفعال کنید.

            // components/MyComponent.js
import { get } from '@vercel/edge-config';

export async function MyComponent() {
  const newFeatureEnabled = await get('newFeatureEnabled');

  return (
    <div>
      {newFeatureEnabled ? <p>New feature is enabled!</p> : <p>New feature is disabled.</p>}
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

شخصی‌سازی با Edge Config

شما می‌توانید از Edge Config برای شخصی‌سازی محتوا و تجربیات بر اساس ترجیحات یا مکان کاربر استفاده کنید. به عنوان مثال، می‌توانید ترجیحات کاربر را در یک پایگاه داده ذخیره کرده و سپس از Edge Config برای ارائه محتوای متفاوت بر اساس آن ترجیحات استفاده کنید.

سناریوی مثال: یک سایت تجارت الکترونیک جهانی می‌خواهد توصیه‌های محصول را بر اساس کشور کاربر نمایش دهد. آنها می‌توانند از یک Edge Config برای نگاشت کشورها به دسته‌بندی‌های توصیه‌ها استفاده کنند.

1. یک Edge Config با کلیدی به نام countryToCategoryMap ایجاد کنید.
2. مقدار آن را روی یک شیء JSON تنظیم کنید که کشورها را به دسته‌بندی‌های محصول نگاشت می‌کند (مثلاً {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
3. در تابع لبه خود، مقدار countryToCategoryMap را بخوانید.
4. کشور کاربر را تعیین کنید (مثلاً از آدرس IP یا یک کوکی).
5. از countryToCategoryMap برای تعیین دسته‌بندی محصول مناسب استفاده کنید.
6. توصیه‌های محصول از آن دسته‌بندی را نمایش دهید.

            // pages/products.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps(context) {
  const countryToCategoryMap = await get('countryToCategoryMap');
  const country = context.req.headers['x-vercel-ip-country'] || 'US'; // Default to US
  const category = countryToCategoryMap[country] || 'General'; // Default to General

  // Fetch product recommendations based on the category
  const products = await fetchProducts(category);

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Product Recommendations</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Replace with your actual product fetching logic
  return [
    { id: 1, name: `Product 1 (${category})` },
    { id: 2, name: `Product 2 (${category})` },
  ];
}

            

              
                Copy
              
            
          

این مثال از هدر x-vercel-ip-country برای تعیین کشور کاربر استفاده می‌کند. این هدر به طور خودکار توسط Vercel اضافه می‌شود. مهم است توجه داشته باشید که اتکای صرف به موقعیت‌یابی جغرافیایی مبتنی بر IP ممکن است همیشه دقیق نباشد. برای بهبود دقت، استفاده از روش‌های دیگر مانند مکان ارائه‌شده توسط کاربر یا سرویس‌های موقعیت‌یابی جغرافیایی پیشرفته‌تر را در نظر بگیرید.

مسیریابی جغرافیایی با Edge Config

شما می‌توانید کاربران را بر اساس مکانشان با استفاده از Edge Config به منابع مختلف هدایت کنید. این برای ارائه محتوای محلی‌شده یا رعایت مقررات منطقه‌ای مفید است.

1. یک Edge Config با کلیدی به نام countryToRedirectMap ایجاد کنید.
2. مقدار آن را روی یک شیء JSON تنظیم کنید که کشورها را به URLها نگاشت می‌کند (مثلاً {"CN": "/china", "DE": "/germany"}).
3. در تابع لبه خود، مقدار countryToRedirectMap را بخوانید.
4. کشور کاربر را تعیین کنید (مثلاً از آدرس IP آنها).
5. کاربر را به URL مناسب هدایت کنید.

            // pages/_middleware.js
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config';

export async function middleware(req) {
  const countryToRedirectMap = await get('countryToRedirectMap');
  const country = req.geo.country || 'US'; // Default to US
  const redirectUrl = countryToRedirectMap[country];

  if (redirectUrl) {
    return NextResponse.redirect(new URL(redirectUrl, req.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/',
}

            

              
                Copy
              
            
          

این مثال از ویژگی req.geo.country استفاده می‌کند که به طور خودکار توسط شبکه لبه Vercel با کد کشور کاربر پر می‌شود. این یک رویکرد تمیزتر و قابل اعتمادتر از تجزیه مستقیم هدر x-vercel-ip-country است. تابع میان‌افزار بررسی می‌کند که آیا URL هدایتی برای کشور کاربر در Edge Config تعریف شده است یا خیر. اگر چنین باشد، کاربر را به آن URL هدایت می‌کند. در غیر این صورت، پردازش درخواست را ادامه می‌دهد.

محدودیت نرخ درخواست با Edge Config

در حالی که Edge Config برای یک راه‌حل کامل محدودیت نرخ درخواست طراحی نشده است، شما می‌توانید از آن در کنار تکنیک‌های دیگر برای پیاده‌سازی محدودیت نرخ درخواست پایه استفاده کنید. ایده این است که پارامترهای محدودیت نرخ (مثلاً، درخواست در دقیقه) را در Edge Config ذخیره کرده و سپس از آن پارامترها در توابع لبه خود برای اعمال محدودیت‌ها استفاده کنید.

نکته مهم: این رویکرد برای سناریوهای ساده محدودیت نرخ درخواست مناسب است. برای محدودیت نرخ درخواست قوی‌تر، استفاده از سرویس‌های اختصاصی یا میان‌افزارها را در نظر بگیرید.

1. یک Edge Config با کلیدهایی مانند requestsPerMinute و blockedIps ایجاد کنید.
2. مقدار requestsPerMinute را روی حد نرخ مورد نظر تنظیم کنید.
3. مقدار blockedIps را روی آرایه‌ای از آدرس‌های IP که باید مسدود شوند، تنظیم کنید.
4. در تابع لبه خود، مقادیر requestsPerMinute و blockedIps را بخوانید.
5. بررسی کنید که آیا آدرس IP کاربر در آرایه blockedIps قرار دارد یا خیر. اگر چنین است، درخواست را مسدود کنید.
6. از یک مکانیزم کش (مثلاً Redis یا Vercel's Edge Cache) برای ردیابی تعداد درخواست‌ها از هر آدرس IP در دقیقه آخر استفاده کنید.
7. اگر تعداد درخواست‌ها از آدرس IP کاربر از حد requestsPerMinute بیشتر شود، درخواست را مسدود کنید.

مثال (توضیحی - نیاز به پیاده‌سازی اضافی برای کش دارد):

            // pages/api/protected-route.js
import { get } from '@vercel/edge-config';

export default async function handler(req, res) {
  const requestsPerMinute = await get('requestsPerMinute');
  const blockedIps = await get('blockedIps');
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress; // Get user's IP

  // Check if IP is blocked
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Too Many Requests');
  }

  // TODO: Implement request counting and caching (e.g., using Redis or Vercel Edge Cache)
  // Example (Conceptual):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Too Many Requests');
  // }
  // await incrementRequestCount(ip);

  // Your protected route logic here
  res.status(200).send('Protected route accessed successfully!');
}

            

              
                Copy
              
            
          

ملاحظات مهم برای محدودیت نرخ درخواست:

• کش کردن: برای ردیابی تعداد درخواست‌ها به یک مکانیزم کش نیاز دارید. Vercel's Edge Cache یا یک نمونه Redis گزینه‌های خوبی هستند.
• آدرس IP: هدر x-real-ip یا req.connection.remoteAddress معمولاً برای دریافت آدرس IP کاربر استفاده می‌شوند. آگاه باشید که این موارد در برخی موارد قابل جعل هستند. برای محیط‌های پروداکشن، استفاده از تکنیک‌های قوی‌تر تشخیص آدرس IP را در نظر بگیرید.
• همزمانی (Concurrency): هنگام افزایش تعداد درخواست‌ها مراقب مسائل مربوط به همزمانی باشید. برای اطمینان از دقت، از عملیات اتمی استفاده کنید.
• پیچیدگی: پیاده‌سازی یک راه‌حل قوی محدودیت نرخ درخواست می‌تواند پیچیده باشد. برای ویژگی‌های پیشرفته‌تر و محافظت در برابر حملات پیچیده، استفاده از سرویس‌های اختصاصی محدودیت نرخ را در نظر بگیرید.

بهترین شیوه‌ها برای استفاده از Edge Config

• Edge Config خود را کوچک نگه دارید: Edge Config برای مقادیر کوچک داده بهینه شده است. از ذخیره مجموعه داده‌های بزرگ در Edge Config خود خودداری کنید.
• از نام‌های کلید توصیفی استفاده کنید: از نام‌های کلید واضح و توصیفی استفاده کنید تا درک و نگهداری پیکربندی شما آسان‌تر شود.
• از متغیرهای محیطی برای داده‌های حساس استفاده کنید: داده‌های حساس مانند کلیدهای API را به جای مستقیم در Edge Config، در متغیرهای محیطی ذخیره کنید.
• تغییرات خود را به طور کامل آزمایش کنید: قبل از استقرار در محیط پروداکشن، تغییرات خود را در یک محیط آزمایشی (staging) تست کنید.
• Edge Config خود را نظارت کنید: Edge Config خود را نظارت کنید تا اطمینان حاصل کنید که طبق انتظار عمل می‌کند و هرگونه مشکل احتمالی را شناسایی کنید. Vercel ابزارهای نظارتی را ارائه می‌دهد که می‌توانید برای ردیابی عملکرد Edge Config خود از آنها استفاده کنید.
• کنترل نسخه: در حالی که خود داده‌های پیکربندی به همان روش کد، مستقیماً تحت کنترل نسخه نیستند، اما این یک رویه خوب است که تغییرات ایجاد شده در Edge Config را مستند کرده و آنها را به استقرارهای کد خاص مرتبط کنید. این به ردیابی و درک تکامل پیکربندی شما کمک می‌کند.
• ملاحظات امنیتی: با داده‌های Edge Config خود به عنوان داده‌های با ارزش و بالقوه حساس رفتار کنید. بهترین شیوه‌های امنیتی را برای مدیریت اسرار و کنترل دسترسی دنبال کنید.

جایگزین‌های Edge Config

در حالی که Edge Config ابزار قدرتمندی است، همیشه بهترین راه‌حل برای هر مورد استفاده‌ای نیست. در اینجا چند جایگزین برای در نظر گرفتن وجود دارد:

• متغیرهای محیطی: برای مقادیر پیکربندی ساده که نیازی به به‌روزرسانی مکرر ندارند، متغیرهای محیطی ممکن است کافی باشند.
• پایگاه‌های داده سنتی: برای مجموعه داده‌های بزرگتر یا نیازهای پیکربندی پیچیده‌تر، یک پایگاه داده سنتی (مانند PostgreSQL, MongoDB) ممکن است انتخاب بهتری باشد.
• سیستم‌های مدیریت محتوا (CMS): برای مدیریت پیکربندی مرتبط با محتوا، یک CMS می‌تواند گزینه خوبی باشد.
• پلتفرم‌های مدیریت ویژگی: پلتفرم‌های اختصاصی مدیریت ویژگی (مانند LaunchDarkly, Split) قابلیت‌های پیشرفته‌تری برای فلگ‌گذاری ویژگی و تست A/B ارائه می‌دهند.
• پایگاه‌های داده بدون سرور (Serverless): پایگاه‌های داده‌ای مانند FaunaDB یا PlanetScale برای محیط‌های بدون سرور طراحی شده‌اند و می‌توانند تعادل خوبی بین عملکرد و مقیاس‌پذیری برای داده‌های پیکربندی ارائه دهند.

نتیجه‌گیری

Next.js Edge Config ابزاری قدرتمند برای مدیریت و توزیع پیکربندی به صورت سراسری در لبه است. با بهره‌گیری از Edge Config، می‌توانید عملکرد برنامه خود را بهینه کنید، تجربیات شخصی‌سازی‌شده ارائه دهید و گردش کار مدیریت پیکربندی خود را ساده کنید. چه در حال ساخت یک سایت تجارت الکترونیک جهانی، یک پلتفرم رسانه اجتماعی یا هر نوع برنامه وب دیگری باشید، Edge Config می‌تواند به شما کمک کند تا تجربه‌ای سریع و جذاب را برای کاربران خود در سراسر جهان ارائه دهید. امکانات آن را کاوش کنید و امروز Edge Config را در پروژه‌های Next.js خود ادغام کنید تا پتانسیل آن را آزاد کنید!